<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>商品列表</title>
    <meta name="keywords" content="文乐文" />
    <meta name="description" content="文乐文" />

    <link rel="stylesheet" href="static/css/swiper.min.css" type="text/css" />
    <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="static/css/common.css" type="text/css" />
    <link rel="stylesheet" href="static/css/element2.css" />
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- 包含头部 -->
      <div class="header_box">
        <!-- container-fluid -->
        <div class="header container">
          <div class="logo_box">
            <img src="static/picture/logo2.png" />
          </div>
          <div class="nav_box">
            <a href="index.html">
              <div class="item">首页</div>
            </a>
            <a href="goods.html">
              <div class="item">产品中心</div>
            </a>
            <a href="integral.html">
              <div class="item">积分商城</div>
            </a>
            <a href="lease.html">
              <div class="item">进销存ERP</div>
            </a>
            <a href="service.html">
              <div class="item">服务与支持</div>
            </a>
            <a href="my.html">
              <div class="item ">个人中心</div>
          </a>
          </div>
          <div class="buy-box">
            <a href="javascript:;" class="tit">购买</a>
            <div class="sub" style="display: none">
              <div class="list">
                <a
                  target="_blank"
                  href="https://mall.jd.com/index-11504190.html?from=pc"
                  >文乐文京东旗舰店</a
                >
              </div>
            </div>
          </div>
          <div class="search_box">
            <input name="keyword" type="text" class="search_input" id="header_search_input" placeholder="搜索">
            <button id="header_search_btn" class="search_btn"></button>
        </div>
        </div>
      </div>

      <div class="page_order_list container">
        <div class="title">重置密码</div>
        <div class="login_box2">
          <div class="item">
            <input
              name="account"
              v-model="loginForm.account"
              type="text"
              class="form-control"
              placeholder="手机"
            />
          </div>

          <div class="item item-code">
            <input
              type="text"
              v-model="loginForm.captcha"
              class="form-control"
              name="code"
              autocomplete="off"
              placeholder="验证码"
            />
            <label class="send_code" @click="getCode"
              >{{timeOut == 60?'获取验证码':timeOut+'s'}}</label
            >
          </div>

          <div class="item">
            <input
              name="password"
              v-model="loginForm.password"
              type="password"
              class="form-control"
              placeholder="新密码"
            />
          </div>
          <div class="btn_box" style="display: flex; justify-content: center">
            <button
              @click="submitChange"
              id="fat-btn"
              class="btn btn-primary login_btn"
              data-loading-text="Loading..."
              type="button"
            >
              重置密码
            </button>
          </div>
        </div>
      </div>

      <!-- 包含公共底部文件 -->
      <div class="footer">
        <div class="footer_box container">
          <div class="contact_box col-sm-4 f-cb">
            <div class="dtitle">服务/Service</div>
            <div class="tel_box">
              <p class="title">全国统一热线电话</p>
              <p class="tel">0574-58974484</p>
            </div>
            <div class="mail_box">
              <p class="title">服务邮箱</p>
              <p class="mail">598292588@qq.com</p>
            </div>
          </div>
          <div class="nav_list col-sm-4 f-cb">
            <div class="dtitle">导航/Navigation</div>
            <ul class="nav_box">
              <li><a href="about.html">关于我们</a></li>
              <li><a href="">商品中心</a></li>
              <li><a href="lease.html">打印机租赁</a></li>
              <li><a href="service.html">服务与支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
          </div>
          <div class="search col-sm-4 f-cb">
            <div class="dtitle">产品中心/Product center</div>
            <div class="search_box">
              <input class="search_input" name="keyword" placeholder="搜索" />
              <!-- <button class="btn btn-primary jd_btn" type="button">京东商城</button>-->
              <a
                class="btn btn-primary jd_btn"
                target="_blank"
                href="https://mall.jd.com/index-11504190.html?from=pc"
                >京东商城</a
              >
            </div>
            <div class="wechat_box">
              <div class="item">
                <img src="static/picture/wechat.svg" />
              </div>
              <div class="item">
                <img src="static/picture/weibo.svg" />
              </div>
            </div>
          </div>
        </div>

        <div class="site_info container">
          Copyright ©2020 宁波文乐文科技有限公司 版权所有
          <a href="https://beian.miit.gov.cn/#/Integrated/index"
            >浙ICP备2020041669号-1</a
          >
        </div>
      </div>
    </div>

    <script src="static/js/vue2.js"></script>
    <script src="static/js/element2.js"></script>
    <script src="static/js/jquery.js"></script>
    <script src="static/js/common.js"></script>
  </body>
</html>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      loginForm: {
        account: "",
        captcha: "",
        password: "",
      },
      timeOut: 60,
      timer:null
    },
    created() {},
    methods: {
      getCode() {
        if (!this.loginForm.account) {
          return this.$message.error("手机号不能为空");
        }

        if (this.timeOut != 60) {
          return;
        }

        $.ajax({
          url: apiurl + `/api/front/sendCode?phone=${this.loginForm.account}`,
          data: JSON.stringify({ phone: this.loginForm.account }),
          type: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
               this.$message.success("短信发送成功");

               this.timer = setInterval(() => {
                this.timeOut--;
                if (this.timeOut == 0) {
                  clearInterval(this.timer);
                  this.timeOut = 60;
                }
              }, 1000);
            } else {
              this.$message.error(res.message);
            }
          },
        });
      },
      submitChange(){
        if (!this.loginForm.account) {
          return this.$message.error("手机号不能为空");
        }
        if (!this.loginForm.captcha) {
          return this.$message.error("验证码不能为空");
        }
        if (!this.loginForm.password) {
          return this.$message.error("新密码不能为空");
        }

        $.ajax({
          url: apiurl + `/api/front/register/reset`,
          data: JSON.stringify(this.loginForm),
          type: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authori-zation": localStorage.getItem("token")
              ? localStorage.getItem("token")
              : "",
          },
          success: (res) => {
            if (res.code == 200) {
              this.$message.success("密码修改成功");
              localStorage.clear()
              setTimeout(()=>{
                window.location.href = "./index.html";
              },1500)
            } else {
              this.$message.error(res.message);
            }
          },
        });
      }
    },
  });
</script>

<style>
  .login_box2 {
    width: 40%;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  .login_box2 .item {
    position: relative;
    margin-bottom: 20px;
  }
  .login_box2 .send_code {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    font-size: 15px;
  }
</style>
